About
About

    크롬 하위버전 SyntaxError - Invalid regular expression 에러 해결하기

    📅 2024. 04. 12

    문제

    • Sentry에서 SyntaxError: Invalid regular expression 에러 확인됨
    • 크롬 하위버전에서 에러 발생하여 화면이 렌더링되지 않는 문제로 확인

    대상

    • Chrome < 69
    • Zod
      • >= 3.21.0
      • < 3.22.4

    트러블슈팅

    • Sentry에 보고된 Chromium 65 버전을 저장소를 통해 다운로드 후, 직접 해당 URL로 접근한 결과 원인을 찾을 수 있었음
    • 원인 코드는 다음과 같음
    const emojiRegex = /^(\p{Extended_Pictographic}|\p{Emoji_Component})+$/u;
    • JavaScript는 정규식 표현에 유니코드를 사용하여 원하는 문자열들을 쉽게 구분할 수 있는 기능을 지원함
    • 유니코드 중 Extended_Pictographic(ECMAScript 스펙)은 크롬 69 버전부터 지원
      • Extended_Pictographic은 기술적으로는 이모지가 아닌 "픽토그래픽" 문자열을 포함하는 이모지
      • ex: "1😂💯♡⌨︎"에서 '😂', '💯' 뿐만 아니라 '♡'와 '⌨︎'까지 모두 포함
    • 정확한 문제 발생 버전 확인을 위해 65 ~ 70 버전을 다운받은 뒤 실행해보니 69 버전부터는 코드가 정상 동작하는 것을 확인

    해결책

    • zod 버전을 v3.22.4로 업그레이드
    • 3.22.4부터는 emoji 관련 정규식을 z.string().emoji()를 사용하는 경우에만 사용함
    • 주의사항: 만약 z.string().emoji()를 사용하는 스키마가 있다면, 여전히 하위 버전에서 에러가 발생할 수 있음. 필요한 경우, z.string().regex()를 통해 직접 정규식을 구현하는 방법을 권장함

    링크

    주간 인기 TOP 7